<template>
  <div class="search-container" @keyup.enter="getUserList">
    <div class="title-container">
      <div class="title">用户</div>
    </div>

    <el-form :inline="true" size="large" :form="userSearchForm" class="search-form">
      <el-input v-model="userSearchForm.name" placeholder="姓名" :prefix-icon="Search" />
      <el-input v-model="userSearchForm.username" placeholder="用户名" :prefix-icon="Search" />
      <el-input v-model="userSearchForm.age" placeholder="年龄" :prefix-icon="Search" />

      <el-select v-model="userSearchForm.sex" placeholder="性别" clearable>
        <el-option label="男" value="男" />
        <el-option label="女" value="女" />
      </el-select>
      <el-input v-model="userSearchForm.birthday" placeholder="出生日期" :prefix-icon="Clock" />
      <el-button type="primary" :icon="Search" class="btn" @click="getUserList"> 搜索 </el-button>

      <el-input v-model="userSearchForm.email" placeholder="电子邮箱" :prefix-icon="Search" />
      <el-input
        v-model="userSearchForm.registrationTime"
        placeholder="注册时间"
        :prefix-icon="Clock"
      />
      <el-input
        v-model="userSearchForm.lastLoginTime"
        placeholder="上一次登录时间"
        :prefix-icon="Clock"
      />
      <el-select v-model="userSearchForm.status" placeholder="状态" clearable>
        <el-option label="正常" :value="1" />
        <el-option label="禁用" :value="0" />
      </el-select>
      <el-input v-model="userSearchForm.phone" placeholder="手机号" :prefix-icon="Search" />
      <el-button type="primary" :icon="CirclePlus" class="btn" @click="addUserVisible = true"
        >添加</el-button
      >
    </el-form>
  </div>
</template>
<script setup name="UserSearchCom">
import { useUserInfo } from '../hooks/useUserInfo'
import { Search, Clock, CirclePlus } from '@element-plus/icons-vue'
const { userSearchForm, getUserList, addUserVisible } = useUserInfo()
</script>
<style lang="less" scoped>
.search-container {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 10fr;
  padding: 20px;
  .title-container {
    position: relative;
    .title {
      position: absolute;
      left: 0;
      top: 0;
      color: #303133;
      font-size: 16px;
      font-weight: bold;
    }
  }
  .search-form {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px;
  }
}
</style>
